<template>
  <div class="form-wrapper">
    <p>
      字符串的值为：<b>{{ str }}</b>
    </p>

    <!-- input 事件回调中，$event 就是 input 事件对象， $event.target 就是 input 这个DOM，target.value就是当前输入框的输入值 -->
    <input type="text" :value="str" @input="str = $event.target.value" />
    <br />
    <!-- 表单的双向绑定 -->
    <p>{{typeof str}}</p>
    <input placeholder="您的银行账户有多少钱" type="text" v-model.lazy="str" />
    <br />
    <!-- input 和 textarea 使用同样的双向绑定 -->
    <textarea v-model="str">我是默认值</textarea>
    <br />


    <form>
      <input placeholder="用户名">
      <input placeholder="密码">
      <label for="">
        <input type="checkbox" v-model="hasRead">
        我已阅读<a href="#">《用户协议》</a>
      </label>
      <button>按钮</button>
      <p >{{hasRead ? '勾选已阅读' : '不勾不行'}}</p>
    </form>

    <div class="list">
      <p>{{ fruiltlist.join('、')}}</p>
      <label>
        <input type="checkbox" v-model="fruiltlist" value="西瓜">西瓜
      </label>
      <label>
        <input type="checkbox" v-model="fruiltlist" value="桃">桃🍑
      </label>
      <label>
        <input type="checkbox" v-model="fruiltlist" value="奶牛">苹果
      </label>
    </div>

    <div class="list">
        <p>性别：</p>
        <p>选择的是: {{gender}}</p>
        <label for="male">男</label>
        <input type="radio" name="n" value="男" id="male" v-model="gender">
        <label for="female">女</label>
        <input type="radio" name="v" value="女" id="female"  v-model="gender">
    </div>

    <p>哪里工作{{whereWork}}</p>
    <select name="" id="" multiple v-model="whereWork">
      <option value="" disabled>要在哪里工作</option>
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="gz">广州</option>
      <option value="sz">深圳</option>
    </select>

    <!-- <input type="text" :value="val" @input="val = $event.target.value"> -->



    <textarea name="" id="" cols="30" rows="10" value="123">adfadsfsadfasdfdsf</textarea>
  </div>
</template>


<script>
export default {
  data() {
    return {
      str: "我是默认值",
      hasRead: false,  // 是否已读
      fruiltlist: [],
      gender: '', // 性别
      whereWork: []
    };
  },
  methods: {
    e(e) {
      console.log(e.type,)
    },
    c(e){
      console.log('one', e.type)
    }
  }
};
</script>


// {} 用来区分选择器和样式描述
// ;  用来间隔多条样式内容的
// pug 编写 html 的
<style lang="sass">
.form-wrapper
  textarea, input
    border: 1px solid
    textarea
      border-width: 2px
  p
    color: red
  b
    font-size: 26px
</style>
